<template>
  <a-modal v-model:visible="showModal" :footer="false" title="扣款详情" width="800px" unmount-on-close @close="onClose">
    <a-descriptions :size="'medium'" :align="{ label: 'right' }">
      <a-descriptions-item label="扣款金额">{{ `${detail.changeDepositAmount} 元` }}</a-descriptions-item>
      <a-descriptions-item label="状态">{{ detail.statusName }}</a-descriptions-item>
    </a-descriptions>
    <table-index class="insure-card-table" :table="tableCompulsory" v-if="tableCompulsory.dataList && tableCompulsory.dataList.length">
      <template #table-summary>
        <div>押金抵扣类型：租车费用 </div>
      </template>
    </table-index>
    <table-index class="insure-card-table" :table="tableCompulsorys" v-if="tableCompulsorys.dataList && tableCompulsorys.dataList.length">
      <template #table-summary>
        <div>押金抵扣类型：违章费用 </div>
      </template>
    </table-index>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import { useTable } from '@/hooks/table'
  import { cutPaymentDetail } from '@/api/order/sOrder'

  // 弹窗状态
  const showModal = ref(false)
  const detail = ref({})
  const show = (record) => {
    showModal.value = true
    cutPaymentDetail({ id: record.id }).then((res) => {
      detail.value = res.result
      console.log('detail', detail.value)
      tableCompulsory.tableLoading = false
      tableCompulsory.dataList = res.result.carFeeList
      tableCompulsorys.tableLoading = false
      tableCompulsorys.dataList = res.result.violationFeeList
    })
  }
  const onClose = () => {
    showModal.value = false
  }
  // table 配置
  const tableCompulsory = useTable({
    pagination: false,
    columns: [
      { title: '订单号（自有）', dataIndex: 'orderCode' },
      { title: '费用名称', dataIndex: 'feeName' },
      { title: '扣款金额', unit: '元', dataIndex: 'cutPaymentAmountStr' },
    ],
    operates: false,
  })
  const tableCompulsorys = useTable({
    pagination: false,
    columns: [
      { title: '违章单号', dataIndex: 'violationCode', width: 150 },
      { title: '关联订单号', dataIndex: 'orderCode', width: 210 },
      { title: '费用名称', dataIndex: 'feeName' },
      { title: '扣款金额', unit: '元', dataIndex: 'cutPaymentAmountStr' },
    ],
    operates: false,
  })
  defineExpose({ show, onClose })
</script>

<style lang="less" scoped>
  .setting-item-wrapper {
    padding: 10px;
    font-size: 14px;
  }
  .insure-card-table {
    margin-bottom: 20px;
  }
</style>
